<!--
 * @Author: ShallowInk
 * @Date: 2021-08-01 13:21:58
 * @Description: 用户编辑页面
 * @FilePath: \GoodsManagement\src\pages\children\EditUser.vue
-->
<template lang="">
  <n-form :model="model" :rules="rules">
    <n-form-item path="userName" label="用户名">
      <n-input v-model:value="model.userName" :on-input="onChange"></n-input>
    </n-form-item>
    <n-form-item path="email" label="邮箱">
      <n-input v-model:value="model.email" :on-input="onChange"></n-input>
    </n-form-item>
    <n-form-item path="phone" label="电话">
      <n-input v-model:value="model.phone" :on-input="onChange"></n-input>
    </n-form-item>
  </n-form>
</template>
<script lang="ts">
import { ref } from "vue";
import { NForm, NFormItem, NInput } from "naive-ui";
import { useMessage } from "naive-ui";
export default {
  components: {
    NForm,
    NFormItem,
    NInput,
  },
  setup() {
    /* 获取input中的值 */
    const modelRef = ref({
      userName: null,
      email: null,
      phone: null,
    });

    /* 限制输入不能为空 */
    const message = useMessage();
    const rules = {
      userName: [
        {
          required: true,
          validator(rule, value) {
            if (!value) {
              return new Error("需要输入用户名");
            }
            return true;
          },
          trigger: ["input", "blur"],
        },
      ],
      email: [
        {
          required: true,
          validator(rule, value) {
            if (!value) {
              return new Error("需要输入邮箱");
            }
            return true;
          },
          trigger: ["input", "blur"],
        },
      ],
      phone: [
        {
          required: true,
          validator(rule, value) {
            if (!value) {
              return new Error("需要输入电话");
            }
            return true;
          },
          trigger: ["input", "blur"],
        },
      ],
    };
    /* 点击传输信息 */
    const onChange = () => {
      // console.log(modelRef.value["permission"])
      sessionStorage.setItem("editUser", JSON.stringify(modelRef.value));
    };

    return {
      model: modelRef,
      rules,
      onChange,
    };
  },
};
</script>
<style lang=""></style>
